<template>
  <div id="main">
    <keep-alive>
    <router-view></router-view>
    </keep-alive>
    <Playlist v-if="isShowPlayList"></Playlist>
    <MessageList v-if="isShowMessageList"></MessageList>
  </div>
</template>

<script>
import Playlist from "./Playlist";
import MessageList from "./MessageList";

export default {
  name: "Main",
  data() {
    return {
      isShowMessageList: false,
      isShowPlayList: false,
    };
  },
  components: { Playlist, MessageList },
  mounted() {
    //要收到侧边栏点击时跳转不同路由的命令，绑定自定义事件，等待点击侧边栏时触发
    this.$bus.$on("getRoutingPop", (data) => {
      this.$router.push({
        name: data,
      });
    }),
    //要收到跳转个人页面的命令，绑定自定义事件，等待点击头像时触发
    this.$bus.$on("routeToUserProfile", (id) => {
      this.$router.push({
        name: "UserProfile",
        query:{
          userId:id
        }
      });
    }),
    //要收到显示或关闭消息列表的命令，绑定自定义事件，等待点击消息时触发
    this.$bus.$on("changeShowMessageList", () => {
      this.isShowMessageList = !this.isShowMessageList;
      //消息列表与当前歌曲播放列表只能显示一个
      this.isShowMessageList
        ? (this.isShowPlayList = false)
        : (this.isShowPlayList = this.isShowPlayList);
    }),
    //要收到显示或关闭当前歌曲播放列表的命令，绑定自定义事件，等待点击歌曲列表时触发
    this.$bus.$on("changeShowPlayList", () => {
      this.isShowPlayList = !this.isShowPlayList;
      //消息列表与当前歌曲播放列表只能显示一个
      this.isShowPlayList
        ? (this.isShowMessageList = false)
        : (this.isShowMessageList = this.isShowMessageList);
    });

    this.$bus.$on("todaily",()=>{
      this.$router.push({
        name: "DailyList",
      });
    })

    this.$bus.$on("ToListing",(id,isRefresh)=>{
      this.$router.push({
        name: "Listing",
        query:{
          songListId:id,
          isRefresh:isRefresh
        }
      });
    })

    // this.$bus.$on("ToListingAndRefresh",(id,isRefresh)=>{
    //   this.$router.push({
    //     name: "Listing",
    //     query:{
    //       songListId:id,
    //       isRefresh:isRefresh
    //     }
    //   });
    //   // this.$router.go(0)
    // })

    this.$bus.$on("ToSearchResult",(keyword)=>{
      this.$router.push({
        name: "SearchResult",
        query:{
          keyword:keyword
        }
      })
    })

  this.$bus.$on("ToContacts",(id,nickname,i)=>{
      this.$router.push({
        name: "Contacts",
        query:{
          userId:id,
          nickname:nickname,
          i:i,
        }
      });
    })

  },
};
</script>

<style scoped>
</style>